<style>
.marquee-box {
  height: 40px;
  line-height: 40px;
  color: #f85415;
  /*color: #0f0f0f;*/
  font-weight: 900;
  font-size: 16px ;
  padding: 0 10px;
  background: #fff;
  /* background-size: 24px 24px; */
  border-top: 1px solid #ddd;
}
.marquee-content{
  overflow: hidden;
  width:100%;
  position: relative;

}
.marquee-content p{
  display: inline-block;
  white-space: nowrap;
  margin: 0;
  font-size: 0;
}
.marquee-content span{
  display: inline-block;
  white-space: nowrap;
  /* padding-right: 40px; */
  font-size: 14px;
}
.quick{
  -webkit-animation: marquee 5s linear infinite;
  animation: marquee 5s linear infinite;
}
.middle{
  -webkit-animation: marquee 8s linear infinite;
  animation: marquee 8s linear infinite;
}
.slow{
  -webkit-animation: marquee 25s linear infinite;
  animation: marquee 25s linear infinite;
}
@-webkit-keyframes marquee {
  0%  { -webkit-transform: translate3d(0,0,0); }
  50% { -webkit-transform: translate3d(-50%,0,0);}
  100% { -webkit-transform: translate3d(-100%,0,0); }
}
@keyframes marquee {
  0%  { transform: translateX(0); }
  50% { transform: translateX(-50%);}
  100% { transform: translateX(-100%);}
}
.marqueen{
  /* display: inline-block; */
  position: absolute;
}
.marqueen span{
  display: inline;
}
</style>
<template>
    <div class="marquee-box" ref="mmm" >
      <div class="marquee-content" ref="out" :style="'width:'+marqueeBox_width+'px; height:40px;'">
        <div id="first_ma" class="marqueen" ref="in" >
          <!-- :class="run?speed:'middle'" -->
          <span   v-for="(item,index) in marqueeContent " style="margin-right:10px;">{{item.desp}}</span>
        </div>
        <div id="second_ma" class="marqueen" ref="second" >
          <!-- :class="run?speed:'middle'" -->
          <span class="text1"  v-for="(item,index) in marqueeContent " style="margin-right:10px;">{{item.desp}}</span>
        </div>
      </div>
    </div>
  </template>

<script>
import $ from "jquery";
import {
        mapGetters
    } from 'vuex'
import announcement from "service/announcement.js";
     export default {
        name: 'marquee',
        data (){
          return{
            run: false,
            screenWidth: document.body.clientWidth,
            marqueeWidth: '',
            marqueeContent:[],
            marqueeContentSmall:[],
            marqueeBox_width:'',
            marqueeText_width:''

          }
        },
        props: {
          content: {
            default: "跑马灯~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~跑马灯~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~1",
            type: String
          },
          speed: {
            default: 'slow',
            type: String
          },
          showtwo: {
            default: true
          }
        },
        computed: {
            ...mapGetters({
                loginUserInfo: 'loginUserInfo'
            })
        },
        watch: {
            loginUserInfo(newVal, oldVal) {
                this.marqueeDesc();
            },
            screenWidth (val,val2) {
                this.marqueeBox_width = this.$refs.mmm.offsetWidth;
                this.marqueen(this.marqueeBox_width);
            }
        },
        mounted (){
          // let out = document.getElementById(this.pid.out).clientWidth;
          // let _in = document.getElementById(this.pid.in).clientWidth;
          var _this = this;
          _this.marqueeDesc();
          _this.startTimer();
          // this.$nextTick(()=>{
          //   // let txt = _this.marqueeWidth;
          //   // console.log(txt+"");
          //   let out = _this.$refs.out.clientWidth;
          //   let _in = _this.$refs.in.clientWidth;
          //   _this.run=_in>out?true:false;
          // });
          window.onresize = () => {
                return (() => {
                    if (!this.timer) {
                    this.screenWidth = document.body.clientWidth
                    this.timer = true
                    let that = this
                    setTimeout(function () {
                        that.timer = false
                    }, 400)
                }
                })()
          }
        },
        methods:{
          async marqueeDesc(data) {
                let vm= this;
                vm.marqueeContentSmall = vm.marqueeContent;
                if(!this.loginUserInfo.userId){
                  return false;
                }
                let jsondata = await announcement.getMarquee({
                    userKey: vm.loginUserInfo.userId
                })
                let changeFlag=false;
                jsondata.forEach(function(item,index){
                     if(vm.marqueeContentSmall.length){
                        vm.marqueeContentSmall.forEach(function(item1,index1){
                             if(item.id===item1.id){
                                 changeFlag=true
                             }
                        })
                      }
                      
                });
                if(jsondata)
                vm.marqueeBox_width = $(".marquee-box").width();
                if(!changeFlag || (jsondata.length!=vm.marqueeContentSmall.length)){
                     vm.marqueeContent= jsondata;
                     vm.marqueeText_width = $("#first_ma").width();
                     vm.marqueen(vm.marqueeBox_width);
                }
            },
            startTimer(){
                let self = this;
                self.si = setInterval(function () {
                    if(self.loginUserInfo.userId){
                      self.marqueeDesc();
                    }
                }, 30000);
            },
            marqueen(width){
                window.clearInterval(this.setin)
                $("#first_ma").css("left",width/2).animate({left:-width/2},12000,'linear',function(){
                $("#first_ma").css("left",width/2)
                })
                $("#second_ma").css("left",width*1.5).animate({left:width/2},12000,'linear',function(){
                  $("#second_ma").css("left",width*1.5)
                })

              this.setin=setInterval(function(){
                $("#first_ma").animate({left:-width/2},12000,'linear',function(){
                $("#first_ma").css("left",width/2)
                })
                $("#second_ma").animate({left:width/2},12000,'linear',function(){
                  $("#second_ma").css("left",width*1.5)
                })
              },12000);
            }
        }
      }
    </script>
